<script setup>
const IMAGEURL = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
</script>

<template>
  <div class="card_box">
    <div class="card">
      <van-image
          lazy-load
          height="8rem"
          fit="contain"
          :src="IMAGEURL"
          radius=".8rem"
      >
      </van-image>
      <div class="right">
        <div class="name">成都青城山景区票务服务中心</div>
        <ul class="tag_list">
          <li class="tag">在售商品 3000</li>
        </ul>
      </div>
    </div>
    <img class="img_bg" :src="IMAGEURL" alt="">
  </div>
</template>

<style scoped lang="scss">
.card_box{
  position: relative;
  height: 17rem;
  background: rgba(0,0,0,0.2);
  padding: 1.5rem;
  overflow: hidden;
  box-sizing: border-box;
  .card{
    display: flex;
    align-items: center;
    height: 11rem;
    background: #FFFFFC;
    box-shadow: 0 1.2rem 2rem 0 rgba(2,95,38,0.05);
    border-radius: 1rem;
    opacity: 1;
    padding: 1.5rem;
    box-sizing: border-box;
    .right{
      margin-left: 1rem;
      .name{
        font-size: 1.6rem;
        font-weight: bold;
        color: #333333;
      }
      .tag_list{
        display: flex;
        flex-wrap: wrap;
        height: 1.7rem;
        margin-top: .5rem;
        .tag{
          background: rgba(0,0,0,0.06);
          border-radius: .3rem;
          opacity: 1;
          padding: 0 .5rem;
          font-size: 1.2rem;
          color: #666666;
          line-height: 1.7rem;
        }
      }
    }
  }
  .img_bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(20px);
  }
}
</style>